﻿<Page
    x:Class="Template81.Views.AppHub"
    x:Name="page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:Controls="using:Template81.Controls"
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:ViewModels="using:Template81.ViewModels"
    xmlns:local="using:Template81.Views"
    Background="{StaticResource Color2BackgroundBrush}"
    mc:Ignorable="d">

    <Page.DataContext>
        <ViewModels:AppHubViewModel />
    </Page.DataContext>

    <Page.BottomAppBar>
        <CommandBar
            x:Name="BottomCommandBar"
            Background="{StaticResource Color2BackgroundBrush}"
            BorderBrush="{StaticResource Color2BackgroundBrush}"
            RequestedTheme="{StaticResource Color2Theme}">
            <CommandBar.PrimaryCommands>
                <AppBarButton
                    x:Uid="AppHub_RefreshAppBarButton"
                    Command="{Binding RefreshCommand}"
                    Icon="Refresh"
                    Label="~Refresh" />
                <AppBarButton
                    x:Uid="AppHub_SettingsAppBarButton"
                    Command="{Binding ShowSettingsUICommand}"
                    Icon="Setting"
                    Label="~Settings" />
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton
                    x:Uid="AppHub_ViewAppBarButton"
                    Command="{Binding ViewFruitCommand}"
                    Icon="View"
                    Label="~View" />
                <AppBarButton
                    x:Uid="AppHub_EditAppBarButton"
                    Command="{Binding EditFruitCommand}"
                    Icon="Edit"
                    Label="~Edit" />
                <AppBarButton
                    x:Uid="AppHub_ShareAppBarButton"
                    Command="{Binding EditFruitCommand}"
                    Icon="Send"
                    IsCompact="True"
                    Label="~Share" />
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="OrientationStateGroup">
                <VisualState x:Name="LandscapeState">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetName="PortraitContainer"
                            Storyboard.TargetProperty="(UIElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PortraitState">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetName="LandscapeContainer"
                            Storyboard.TargetProperty="(UIElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid
            x:Name="PortraitContainer"
            Visibility="Visible" />

        <Grid
            x:Name="LandscapeContainer"
            Visibility="Visible">
            <Hub
                Background="{StaticResource Color1BackgroundBrush}"
                RequestedTheme="Light">
                <Hub.Header>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Rectangle
                            Margin="-40,-20,0,-20"
                            Fill="{StaticResource Color2BackgroundBrush}" />
                        <Path
                            Grid.Column="1"
                            Height="108"
                            Width="50.3"
                            Margin="-10,-20,-51,-20"
                            VerticalAlignment="Bottom"
                            Data="M0,0 L512.975,0 L289,108 L0,108 z"
                            Fill="{StaticResource Color2BackgroundBrush}"
                            Stretch="Fill"
                            UseLayoutRounding="False" />
                        <TextBlock
                            x:Uid="AppHub_Header"
                            Foreground="{StaticResource Color2ForegroundBrush}"
                            Text="~Application Header" />
                    </Grid>
                </Hub.Header>
                <HubSection
                    Width="400"
                    VerticalContentAlignment="Bottom">
                    <HubSection.Background>
                        <ImageBrush
                            AlignmentX="Center"
                            AlignmentY="Center"
                            ImageSource="{Binding Hero.Image}"
                            Stretch="UniformToFill" />
                    </HubSection.Background>
                    <DataTemplate>
                        <Grid
                            Width="325"
                            RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <CompositeTransform TranslateY="-25" />
                            </Grid.RenderTransform>
                            <Rectangle
                                Fill="{StaticResource Color2BackgroundBrush}"
                                Opacity=".5" />
                            <StackPanel
                                Margin="20,25,20,25"
                                VerticalAlignment="Bottom">
                                <TextBlock
                                    Foreground="{StaticResource Color2ForegroundBrush}"
                                    Style="{ThemeResource TitleTextBlockStyle}"
                                    Text="{Binding
                                        Hero.Title,
                                        FallbackValue=!Title}"
                                    TextTrimming="CharacterEllipsis"
                                    TextWrapping="NoWrap" />
                                <TextBlock
                                    Foreground="{StaticResource Color2ForegroundBrush}"
                                    MaxLines="2"
                                    Style="{ThemeResource SubtitleTextBlockStyle}"
                                    Text="{Binding
                                        Hero.Subtitle,
                                        FallbackValue=!Subtitle}"
                                    TextTrimming="WordEllipsis"
                                    TextWrapping="WrapWholeWords" />
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </HubSection>
                <HubSection>
                    <HubSection.Resources>
                        <CollectionViewSource
                            x:Key="GroupedItems"
                            IsSourceGrouped="True"
                            ItemsPath="Items"
                            Source="{Binding Items}"
                            d:Source="{Binding
                                Items,
                                Source={d:DesignInstance
                                    IsDesignTimeCreatable=True,
                                    Type=ViewModels:AppHubViewModel}}" />
                    </HubSection.Resources>
                    <DataTemplate>
                        <Controls:VariableSizedGridView
                            MaxHeight="1080"
                            BorderThickness="0"
                            IsSwipeEnabled="False"
                            ItemsSource="{Binding
                                Source={StaticResource GroupedItems}}"
                            RenderTransformOrigin="0.5,0.5"
                            SelectionChanged="GridView_SelectionChanged"
                            SelectionMode="Single">
                            <Controls:VariableSizedGridView.RenderTransform>
                                <CompositeTransform TranslateY="0" />
                            </Controls:VariableSizedGridView.RenderTransform>
                            <GridView.ItemTemplateSelector>
                                <Controls:AdTemplateSelector>
                                    <Controls:AdTemplateSelector.AdTemplate>
                                        <DataTemplate>
                                            <Grid
                                                Height="{Binding RowSpan}"
                                                Width="{Binding ColSpan}"
                                                Background="{StaticResource Color2BackgroundBrush}">
                                                <!-- advertisement -->
                                            </Grid>
                                        </DataTemplate>
                                    </Controls:AdTemplateSelector.AdTemplate>
                                    <Controls:AdTemplateSelector.DefaultTemplate>
                                        <DataTemplate>
                                            <Grid
                                                Height="{Binding RowSpan}"
                                                Width="{Binding ColSpan}">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition />
                                                    <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <Grid.Background>
                                                    <ImageBrush
                                                        AlignmentX="Center"
                                                        AlignmentY="Center"
                                                        ImageSource="{Binding Image}"
                                                        Stretch="UniformToFill" />
                                                </Grid.Background>
                                                <Rectangle
                                                    Grid.Row="1"
                                                    Fill="{StaticResource Color2BackgroundBrush}"
                                                    Opacity=".75" />
                                                <StackPanel
                                                    Grid.Row="1"
                                                    Margin="20,20,20,40">
                                                    <TextBlock
                                                        Foreground="{StaticResource Color2ForegroundBrush}"
                                                        Style="{ThemeResource TitleTextBlockStyle}"
                                                        Text="{Binding
                                                            Title,
                                                            FallbackValue=!Title}"
                                                        TextTrimming="CharacterEllipsis"
                                                        TextWrapping="NoWrap" />
                                                    <TextBlock
                                                        Foreground="{StaticResource Color2ForegroundBrush}"
                                                        MaxLines="2"
                                                        Style="{ThemeResource SubtitleTextBlockStyle}"
                                                        Text="{Binding
                                                            Subtitle,
                                                            FallbackValue=!Subtitle}"
                                                        TextTrimming="WordEllipsis"
                                                        TextWrapping="WrapWholeWords" />
                                                </StackPanel>
                                            </Grid>
                                        </DataTemplate>
                                    </Controls:AdTemplateSelector.DefaultTemplate>
                                </Controls:AdTemplateSelector>
                            </GridView.ItemTemplateSelector>
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <TextBlock
                                                Margin="7,0,0,5"
                                                Foreground="{StaticResource Color1ForegroundBrush}"
                                                Style="{StaticResource SubheaderTextBlockStyle}"
                                                Text="{Binding
                                                    Title,
                                                    FallbackValue=!Title}"
                                                TextWrapping="NoWrap" />
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                    <GroupStyle.Panel>
                                        <ItemsPanelTemplate>
                                            <VariableSizedWrapGrid
                                                Margin="0,0,70,0"
                                                ItemHeight="1"
                                                ItemWidth="1"
                                                RenderTransformOrigin="0.5,0.5">
                                                <VariableSizedWrapGrid.RenderTransform>
                                                    <CompositeTransform TranslateY="0" />
                                                </VariableSizedWrapGrid.RenderTransform>
                                            </VariableSizedWrapGrid>
                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>
                                </GroupStyle>
                            </GridView.GroupStyle>
                        </Controls:VariableSizedGridView>
                    </DataTemplate>
                </HubSection>
                <HubSection>
                    <DataTemplate>
                        <!-- advertisement -->
                        <Rectangle
                            Height="490"
                            Width="250"
                            Margin="0,0,0,0"
                            Fill="{StaticResource Color1ForegroundBrush}"
                            Opacity=".5"
                            RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <CompositeTransform
                                    TranslateX="-70"
                                    TranslateY="40" />
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </DataTemplate>
                </HubSection>
            </Hub>
            <SearchBox
                x:Name="MySearchBox"
                x:Uid="AppHub_SearchBox"
                Width="32"
                Margin="0,80,40,0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                PlaceholderText="~Placeholder"
                RequestedTheme="{StaticResource Color1Theme}">
                <Interactivity:Interaction.Behaviors>
                    <Core:EventTriggerBehavior EventName="GotFocus">
                        <Core:ChangePropertyAction
                            PropertyName="Width"
                            Value="350" />
                    </Core:EventTriggerBehavior>
                    <Core:EventTriggerBehavior EventName="LostFocus">
                        <Core:ChangePropertyAction
                            PropertyName="Width"
                            Value="32" />
                    </Core:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </SearchBox>
        </Grid>

    </Grid>
</Page>

<!-- © 2006-2014 MicrosoftGet HelpPrivacy StatementTerms of UseCode of ConductAdvertise With UsVersion 3.6.2014.20885 -->